<template>
	<div>
		<div class="wy_filter">
			<el-input v-model="query.name" placeholder="请输入要查询的订单编号"></el-input>
			<el-button type="primary" plain icon="el-icon-search" @click="search">查询</el-button>
			<div class="clear"></div>
		</div>
		<el-table
		  :data="orders.records"
		  stripe
		  border>
		  <el-table-column label="订单编号" prop="orderNo" width="200px" align="center"></el-table-column>
		  <el-table-column label="下单用户" width="120px" align="center">
			  <template slot-scope="scope">
			  				  <template v-for="item in form.userAll">
			  					  <span v-if="item.id === scope.row.userId">{{item.nickyName}}</span>
			  				  </template>
			  </template>
		  </el-table-column>
		  <el-table-column label="创建时间" width="200px" align="center">
			  <template slot-scope="scope">
				  <span>{{scope.row.createTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}}</span>
			  </template>
		  </el-table-column>
		  <el-table-column label="订单状态" align="center" width="120px">
			  <template slot-scope="scope">
				  <template v-for="item in form.orderStatusAll">
					  <span v-if="item.orderStatus === scope.row.orderStatus">{{item.statusName}}</span>
				  </template>
			  </template>
		  </el-table-column>
		  <el-table-column label="订单总价" prop="totalPrice" align="center"></el-table-column>
		  <el-table-column label="支付状态" align="center" width="120px">
		  			  <template slot-scope="scope">
		  				  <template v-for="item in form.payStatusAll">
		  					  <span v-if="item.payStatus === scope.row.payStatus">{{item.statusName}}</span>
		  				  </template>
		  			  </template>
		  </el-table-column>
		  <el-table-column label="支付时间" width="200px" align="center">
			  <template slot-scope="scope">
			  				  <span>{{scope.row.payTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}}</span>
			  </template>
		  </el-table-column>
		  <el-table-column label="最新修改时间" width="200px" align="center">
			  <template slot-scope="scope">
			  				  <span>{{scope.row.updateTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}}</span>
			  </template>
		  </el-table-column>
		  
		  </el-table>
		  
		  <el-pagination
		    background
			:current-page.sync="query.pageNo"
		    layout="prev, pager, next"
		    :page-count="orders.pages"
			@current-change="getTableData()">
		  </el-pagination>
	</div>
</template>

<script>
	import { Message ,Notification, Loading} from 'element-ui'
	export default {
		name: "OrderList",
		data() {
			const module = '/shop-order'
			return {
				url: {
					list: module + '/list'
				},
				query: {
					pageNo: 1,
					pageSize: 8,
					name: ''
				},
				form: {
					orderStatusAll: [],
					userAll: [],
					payStatusAll: []
				},
				orders: []
			}
		},
		created() {
			this.getTableData()
		},
		mounted() {
			
		},
		methods: {
			getTableData() {
				this.get(this.url.list,this.query,response => {
					console.log(response)
					this.orders = response.order
					this.form.orderStatusAll = response.status
					this.form.userAll = response.user
					this.form.payStatusAll = response.pay
					
					
				})
				// const tlLoading = Loading.service({
				// 	text: '拼命加载中',
				// 	background: 'rgba(255,255,255,0.7)'
				// })
				// this.$axios.request({
				// 	url: '/ums-user/list',
				// 	method: 'get',
				// 	params: this.query
				// }).then(response => {
				// 	if(response.data.code === 200){
				// 		this.tableData = response.data.obj
				// 	}else{
				// 		this.$message.error('错了哦，这是一条错误消息' + response.data.message)
				// 		Notification.error({
				// 		          title: '错误',
				// 		          message: response.data.message
				// 		        })
				// 	}
				// }).catch(error => {
				// 	this.$message.error('错了哦，这是一条错误消息')
				// 	Notification.error({
				// 	          title: '错误',
				// 	          message: error
				// 	        })
				// }).finally(() => {
				// 	tlLoading.close()
				// })
			},
			search() {
				this.query.pageNo = 1
				this.getTableData()
			}
		}
	}
</script>

<style>
</style>
